<style>
	.layui-form-label{width: 120px;}
	.layui-input-block {
	    margin-left: 120px;
	}
</style>
<div class="main">
	<div class="container">
		<div style="background:#fff;min-height: 800px; margin: 20px 0; padding: 20px;">
			<div style="margin: auto; width: 800px;">
				<div style="display: flex; margin-bottom: 30px;">
					<img src="{$rs.image}" style="width: 150px; height: 150px;" />
					<div style="flex:1;margin-left: 20px;">
						<div style="font-size: 22px; font-weight: 700; margin-bottom: 30px;">
							{$rs.name}
						</div>
						<div style="font-size:20px;font-weight: 700;color: red;">
							￥<span id="danjia">{$rs.jidu_price}</span> /每份
						</div>
					</div>
				</div>

				<div class="center_form">
					<div class="layui-form">
						{:token()}
						<div class="layui-form-item">
							<label class="layui-form-label"><span style="color:red;">*</span> 订购时长</label>
							<div class="layui-input-block">
								<div class="layui-form">
								  <input type="radio" name="AAA" value="0" title="订一季" lay-filter="price" checked>
								  <input type="radio" name="AAA" value="1" title="订半年" lay-filter="price">
								  <input type="radio" name="AAA" value="2" title="订整年" lay-filter="price">
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"><span style="color:red;">*</span> 订购日期</label>
							<div class="layui-input-block">
								<input type="text" id="dinggou_date"  lay-verify="required"
									placeholder="请输入订购日期" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"><span style="color:red;">*</span> 订购份数</label>
							<div class="layui-input-block">
								<div style="font-size: 0;">
								  <button onclick="jian()" class="iconfont" style="display: inline-block;width: 40px;height: 38px; vertical-align: middle;border: 1px solid #e5e5e5;box-sizing: border-box;">&#xe768;</button>
								  <input type="number" class="layui-input" id="shuliang" style="display: inline-block; width: 40px; vertical-align: middle; text-align: center;font-size: 14px; padding-left: 0;" max="99" min="1" value="1" />
								  <button onclick="jia()" class="iconfont" style="display: inline-block;width: 40px;height: 38px; vertical-align: middle;border: 1px solid #e5e5e5;box-sizing: border-box;">&#xe767;</button>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">总价</label>
							<div class="layui-input-block" style="display: flex;align-items: center;">
								<div style="display: inline-block;vertical-align: middle;color: red;">￥<span id="heji">{$rs.jidu_price}</span></div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"><span style="color:red;">*</span> 收货人</label>
							<div class="layui-input-block">
								<input class="layui-input" type="text" id="shouhuoren" maxlength="10" placeholder="请输入收货人姓名">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"><span style="color:red;">*</span> 收货人电话</label>
							<div class="layui-input-block">
								<input class="layui-input" type="text" maxlength="20" id="tel" placeholder="请输入收货人电话">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"><span style="color:red;">*</span> 收货人地址</label>
							<div class="layui-input-block">
								<textarea class="layui-textarea" placeholder="请输入收货人地址" id="address" rows="3"></textarea>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"><span style="color:red;">*</span> 备注</label>
							<div class="layui-input-block">
								<textarea class="layui-textarea" id="beizhu" placeholder="默认从订购日期次月开始寄送当期书刊，如有其它问题请备注" rows="3"></textarea>
							</div>
						</div>
					</div>
					<div class="btn" style="margin-top:30px;">
						<button type="button"
							class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-normal layui-btn-radius"
							 id="btn_submit">提交</button>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>
<script>
		var price_list=[{$rs.jidu_price},{$rs.bannian_price},{$rs.yinian_price}];
	layui.use(function(){
	  var form = layui.form;
	  var layer = layui.layer;
	  var laydate = layui.laydate;
	    // 渲染
	    laydate.render({
	      elem: '#dinggou_date'
	    });
	  // radio 事件
	  form.on('radio(price)', function(data){
	    var elem = data.elem; // 获得 radio 原始 DOM 对象
	    var checked = elem.checked; // 获得 radio 选中状态
	    var value = elem.value; // 获得 radio 值
	    var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象

	    //layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
		price=price_list[value];
		$('#danjia').text(price);
		num=parseInt($('#shuliang').val());
		$('#heji').text((price*num).toFixed(2));
	  });

	  $('#btn_submit').bind('click',function(){

		  shichang_arr=['一季度','半年','一年'];
		  aa=$('input[name="AAA"]:checked').val();
		  if($('#dinggou_date').val()==''){
			  layer.msg('请选择订购日期',{icon:5});return false;
		  }
		  if(parseInt($('#shuliang').val())<1){
		  	  layer.msg('订购数量需大于等于1',{icon:5});return false;
		  }
		  if($('#shouhuoren').val().trim()==''){
			  layer.msg('请填写收货人',{icon:5});return false;
		  }
		  if($('#tel').val().trim()==''){
		  	layer.msg('请填写手机号',{icon:5});return false;
		  }
		  if (!/^1\d{10}$/.test($('#tel').val().trim())) {
                layer.msg('手机号格式不正确',{icon:5});return false;
          }
		  if($('#address').val().trim()==''){
		  	layer.msg('请填写电话号码',{icon:5});return false;
		  }
		  var loadIndex = layer.load(2);
		  $.ajax({
		      type:"POST",
		      url:"/api.php/index/submit_dingyue",
		      dataType:"json",
		      data:{
		          "dingyueshichang":shichang_arr[aa],
		          "dinggou_date":$('#dinggou_date').val(),
		          "price":$('#danjia').text(),
		          "dinggoufenshu":parseInt($('#shuliang').val()),
		          "money":$('#heji').text(),
		          "shouhuoren":$('#shouhuoren').val().trim(),
				  "tel":$('#tel').val().trim(),
				  "address":$('#address').val().trim(),
		          "beizhu":$('#beizhu').val().trim(),
		          "qikan_id":{$rs.id}
		      },
		      success:function(res){
		          console.log(res);
				  layer.close(loadIndex);
		          if(res.code==0){
		              layer.msg(res.msg,{icon:5});

		          }else{
		              layer.msg(res.msg,{icon:6},function(){
		                  layer.close(loadIndex);
						  //window.location.href="{:url('zhuanyeshukan/qikan_dingyue_fukuan')}?id="+res.data.order_id;
							layer.open({
								type: 2,
								title: '付款',
								shadeClose: true,
								fixed: false,
								area: ['450px', '640px'],
								content: ["{:url('zhuanyeshukan/qikan_dingyue_fukuan')}?id="+res.data.order_id],
						    });
		              });
		          }
		      }
		  });
	  })

	});

	function jia(){
		num=parseInt($('#shuliang').val());
		num++;
		if(num<100){
			$('#shuliang').val(num);

			price=$('#danjia').text();

			$('#heji').text((price*num).toFixed(2));
		}

	}
	function jian(){
		num=parseInt($('#shuliang').val());
		num--;
		if(num>0){
			$('#shuliang').val(num);

			price=$('#danjia').text();

			$('#heji').text((price*num).toFixed(2));
		}

	}

	function show_result(){
		window.location.href="{:url('zhuanyeshukan/qikan_dingyue_result')}";
	}
	</script>
